<style>
  .g-desc>p{
    border-bottom: 0;
  }
</style>
<script>
  function selected(color) {
    $(color).addClass('current').siblings('li').removeClass('current');
    var products = JSON.parse(sessionStorage.getItem('products'));
    console.log(products);
    var color = $('#color-group .current').text();
    var size = $('#size-group .current').text();
    var current_product = '';
    products.forEach(function (product) {
      if (product.model == color && product.version == size) {
          current_product = product;
          console.log('current product is:', current_product);
          $('.price').text('$'+current_product.msrp);
          $('input[name="sn"]').val(current_product.sn);
      }
    })
  }
</script>
<header class="mui-bar mui-bar-nav header">
  <!div class="mui-icon mui-pull-left mui-action-menu" style="padding-top:
  0px"><span class="mui-icon mui-icon-bars"></span></div-->
  <h1 class="mui-title">产品详情</h1>
</header>
<input type="hidden" name="price" value="<%= data[0].msrp%>">
<input type="hidden" name="sn" value="<%= data[0].sn%>">
<div class="mui-content">
<div id="slider" class="mui-slider" >
  <div class="mui-slider-group">
    <div class="mui-slider-item">
      <a href="#"> <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_main.jpeg"> </a>
    </div>
    <div class="mui-slider-item">
      <a href="#"><img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_sub1.jpeg"></a>
    </div>
    <div class="mui-slider-item">
      <a href="#"> <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_sub2.jpeg"> </a>
    </div>
  </div>
  <div class="mui-slider-indicator">
    <div class="mui-indicator mui-active"></div>
    <div class="mui-indicator"></div>
    <div class="mui-indicator"></div>
  </div>
</div>
<div class="g-price">
  <% var cny_price = Number(data[0].msrp*rate).toFixed(2)%>
  <span class="fl money"><em>$<%= data[0].msrp%></em>&nbsp;<em>¥<%= cny_price%></em></span>
  <!--<del class="fl delmoney">￥198</del>-->
</div>
<div class="g-desc">
  <h2><%= data[0].name%></h2>
  <p style="border-bottom: 0">品牌：<%= data[0].brand%> 规格：<%= data[0].model%> 毛重：<%= data[0].weight%>kg</p>
  <p>英文名：<%= data[0].pinyin%></p>
  <p>库存：1</p>
</div>

<!--图文详情-->
<h2 class="liketitle">图文详情</h2>
<div class="g-mall-content">
  <div id="text-content">
    <%= data[0].description%>
  </div>
  <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_detail1.jpeg"/>
  <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_detail2.jpeg" onerror="javascript:this.src='/images/blanc.jpg'"/>
  <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_detail3.jpeg" onerror="javascript:this.src='/images/blanc.jpg'"/>
  <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_detail4.jpeg" onerror="javascript:this.src='/images/blanc.jpg'"/>
  <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_detail5.jpeg" onerror="javascript:this.src='/images/blanc.jpg'"/>
  <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_detail6.jpeg" onerror="javascript:this.src='/images/blanc.jpg'"/>
</div>
<!--固定在底部的按钮-->
<div class="jl"></div>
<div class="fix-mall-btn">
  <div class="fix-mall-index fl">
    <a href="/">
      <i class="iconfont">&#xe601;</i>
      <!--p>首页</p-->
    </a>
    <a href="/cart" class="collect">
      <i class="iconfont">&#xe600;</i>
      <!--p>购物车</p-->
    </a>
  </div>
  <div class="fix-buy-btn fr" style="width: 60%">
    <p>加入购物车</p>
  </div>
</div>
<!--选择商品属性弹出框-->
<div class="mui-backdrop" style="display: none;"></div>
  <div class="g-detail" style="display: none;">
    <div class="g-detail-top">
      <div class="g-detail-close"><i class="iconfont"></i></div>
      <div class="g-top-img fl"><img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[0].sn%>_thumb.jpeg"></div>
      <div class="g-top-info fl">
        <p class="price">$<%= data[0].msrp%></p>
      </div>
    </div>
    <div id="attr-container" style="display: none">
      <div class="g-detail-color">
        <h2>颜色</h2>
        <ul id="color-group">

        </ul>
      </div>
      <div class="g-detail-size">
        <h2>尺码</h2>
        <ul id="size-group">

        </ul>
      </div>
    </div>
    <div class="g-detail-num">
      <h2>购买数量</h2>
      <div>
        <div class="mui-numbox" data-numbox-min="0">
          <button class="mui-btn mui-numbox-btn-minus" type="button" disabled="">-</button>
          <input class="mui-numbox-input" type="number" border="0">
          <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>
      </div>
    </div>
    <div class="g-detail-btn">
      确定
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
<script>
  $(function () {
    $.get('/api/product/?sn=<%= data[0].sn%>', function (call) {

      console.log(call);
      sessionStorage.setItem('products', JSON.stringify(call.products));
      if (call.products.length > 0) {
        $('#attr-container').show();
        var color_arr = [];
        var version_arr = [];
        call.products.forEach(function (p_info) {
          if (color_arr.indexOf(p_info.model) == -1) {
            color_arr.push(p_info.model);
          }
          if (version_arr.indexOf(p_info.version) == -1) {
              version_arr.push(p_info.version);
          }
        })
        color_arr.forEach(function (color) {
          $('#color-group').append('<li onclick="selected(this)">'+color+'</li>');
        });
        $('#color-group>li:first').addClass('current');
        version_arr.forEach(function (size) {
          $('#size-group').append('<li onclick="selected(this)">'+size+'</li>');
        });
        $('#size-group>li:first').addClass('current');
      }
    })
  })
</script>
<script>
  //点击购买弹出遮罩
  $(function(){
    $(".fix-buy-btn").click(function(){
      $(".mui-backdrop").show();
      $(".g-detail").slideDown();
    })
    $(".g-detail-close").click(function(){
      $(".mui-backdrop").hide();
      $(".g-detail").slideUp();
    })
  })
  $(function(){
    var desc = $('#text-content').text();
    var rep = desc.replace(/\\n|\/n/, '<br/>');
    $('#text-content').html(rep);
//    $(".g-detail-color , .g-detail-size").each(function(){
//      var i=$(this);
//      var p=i.find("ul > li");
//      p.click(function(){
//          $(this).addClass("current").siblings("li").removeClass("current");
//      })
//    })

  });
  //加入购物车

  $('.g-detail-btn').click(function () {
    var amount = $('.mui-numbox-input').val();
    var sn = $('input[name="sn"]').val();
    var openId = sessionStorage.getItem('openid');
    var reqBody = {
          amount: amount,
          sn: sn,
          openId: openId
    };
    $.post('/users/cart/', reqBody, function (call, stat) {
        console.log(call,stat);
      if (stat == 'success') {
          $(".mui-backdrop").hide();
          $(".g-detail").slideUp();
          mui.toast('加入成功！');
      }
    })
  })
</script>
<script>
  var picker = new mui.PopPicker();
  $.get('/categories/', function (call) {
    var cats = JSON.parse(call);
    picker.setData(cats);
    $('.mui-action-menu').click(function () {
      picker.show(function (selectItems) {
        console.log(selectItems[0]);
        window.location.href = '/product_list/'+selectItems[0];
      })
    })
  });
  $('.mui-numbox>button').click(function () {
    var amount = mui('.mui-numbox').numbox().getValue();
    console.log(amount);
    var price = Number('<%= data[0].msrp%>');
    var total = amount*price;
    var total_rmb = total*5;
    $('#total_price').text(total);
    $('#total_price_rmb').text(total_rmb);
  })
</script>
